<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>final assignment</title>
    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/jquery-3.6.1.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- header -->
    <div class="header">
        <!-- 顶部nav -->
        <div class="nav-top">
            <span class="logoname">逗拌</span>
            <span>d</span><span>o</span><span>u</span><span>b</span><span>a</span><span>n</span>
        </div>

        <!-- 中间nav -->
        <div class="wrapper nav-mid">
            <div class="left">
                <span class="name">逗拌网</span>
                <div class="search">
                    <input type="text" placeholder="书籍、电影、音乐">
                    <span class="glyphicon glyphicon-search"></span>
                </div>

            </div>
            <div class="right">
                <ul>
                    <li><a href="#read">读书</a></li>
                    <li><a href="#movie">电影</a></li>
                    <li><a href="#music">音乐</a></li>
                    <li><a href="#city">同城</a></li>
                    <li><a href="#club">小组</a></li>
                    <li><a href="#read">阅读</a></li>
                    <li><a href="#FM">FM</a></li>
                    <li><a href="#time">时间</a></li>
                    <li><a href="#pin">逗品</a></li>
                </ul>
            </div>
        </div>

        <!-- end-nav -->
        <div class="nav-end">
            <form action="">
                <span>账号密码登录</span>
                <input type="text" placeholder="手机号 / 邮箱">
                <input type="password" placeholder="密码">
                <input type="submit" value="登录逗拌">
            </form>
        </div>
    </div>


    <!-- body -->
    <div class="box">

        <!-- 热点内容 -->
        <div class="hot">
            <div class="hot-content wrapper">
                <div class="hot-content-left">
                    <h2>热点内容 · · · · · · <a href="">( 更多 )</a></h2>
                    <ul>
                        <li>
                            <a href=""><img src="./img/hot1.png"></a>
                            <br>
                            <span><a>幻想出租屋。 </a>143张照片</span>
                        </li>
                        <li>
                            <a href=""><img src="./img/hot2.png"></a>
                            <br>
                            <span><a>幻想出租屋。 </a>143张照片</span>
                        </li>
                        <li>
                            <a href=""><img src="./img/hot3.png"></a>
                            <br>
                            <span><a>幻想出租屋。 </a>143张照片</span>
                        </li>
                        <li>
                            <a href=""><img src="./img/hot4.png"></a>
                            <br>
                            <span><a>幻想出租屋。 </a>143张照片</span>
                        </li>
                    </ul>
                </div>

                <div class="hot-content-mid">
                    <ul>
                        <li>
                            <a href="">两个月108公里，业余游泳爱好者路在何方</a><br>
                            林大洲🏊‍♀️📖的日记<br>
                            不知不觉计划已过半。 刚好跟小伙伴们讨论到Anna Kiesenhofer，那位自己把自己训练成奥运冠军的30岁数学博士。我：“想知道她是怎么练的，我也没教练没...
                        </li>
                        <li><a href="">根据真实案件改编的悬疑小说：死去的人，真的会为了复仇而活过来吗</a></li>
                        <li><a href="">媒介蒙太奇 之 观看奥运</a></li>
                        <li><a href="">实习记者的一天</a></li>
                        <li><a href="">一名平凡读者的买书总结</a></li>
                        <li><a href="">叶芝和他的拜占庭诗篇</a></li>
                        <li><a href="">2022年9月逗拌网网络侵权举报受理情况</a></li>
                    </ul>
                </div>

                <div class="hot-content-right">
                    <h2>热门话题 · · · · · · <a href="">( 去话题广场 )</a></h2>
                    <ul>
                        <li><a href="">看展记</a><br><span>1.1亿次浏览</span></li>
                        <li><a href="">我与在华老外打过的交道</a><br><span>12.3万次浏览</span></li>
                        <li><a href="">学术著作中的有趣插图</a><br><span>新话题 · 3.3万次浏览</span></li>
                        <li><a href="">小狗也会有心事</a><br><span>5.5万次浏览</span></li>
                        <li><a href="">总觉得截图可以留住美好</a><br><span>2.0万次浏览</span></li>
                        <li><a href="">我真的很会买东西</a><br><span>39.2万次浏览</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--逗拌时间-->
        <div class="time">
            <div class="time-content wrapper">
                <div class="top">
                    <a href="#" name="time"></a>
                    <h3>逗拌时间</h3>
                    <h4>&nbsp&nbsp&nbsp&nbsp&nbsp热门专栏</h4>
                    <span> · · · · · · ( <a href="#">更多</a> )</span>
                </div>
                <div class="bottom">
                    <ul>
                        <li><a href="#">
                                <img src="img/time1.jpg">
                                <p>花艺静物摄影课——拍照，插花，写大地的诗</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time2.jpg">
                                <p>轻松摆脱困境的秘密——颠覆你认知的社会心理学</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time3.jpg">
                                <p>探究精神与习惯的养成——批判性思维30讲</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time4.jpg">
                                <p>走出单一思维的陷阱——人类学</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time5、.jpg">
                                <p>葛剑雄讲中国史——50个关键词复原历史真相</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time6.jpg">
                                <p>帝王与巨商——从10个经济关键词看古代中国</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time7.jpg">
                                <p>奇异植物博物馆——揭秘植物背后不为人知的一面</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time8.jpg">
                                <p>文学的庙堂与江湖——传说中的水浒</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time9.jpg">
                                <p>抚平时光伤痕——走出PTSD的30堂创伤修复课</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/time10.jpg">
                                <p>疗愈你内在的小孩——人人都可以听的心理成长课</p>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--逗拌电影-->
        <div class="movie">
            <a href="#" name="movie"></a>
            <div class="movie-content wrapper">
                <div class="left">
                    <h1>电影</h1>
                    <ul>
                        <li><a href="#">影讯&购票</a></li>
                        <li><a href="#">选电影</a></li>
                        <li><a href="#">电视剧</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">分类</a></li>
                        <li><a href="#">影评</a></li>
                        <li><a href="#">预告片</a></li>
                        <li><a href="#">问答</a></li>
                    </ul>
                </div>
                <div class="mid">
                    <h3>正在热映 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#">
                                <img src="img/movie1.webp" alt="" srcset="">
                                <h5>平凡英雄</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie2.webp" alt="" srcset="">
                                <h5>我的遗憾...</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie3.webp" alt="" srcset="" style="height:140px;">
                                <h5>万里归途</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie4.webp" alt="" srcset="" style="height:140px;">
                                <h5>陪你在全...</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie5.webp" alt="" srcset="">
                                <h5>新灰姑娘2</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie6.webp" alt="" srcset="">
                                <h5>叫我郑先生</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie7.webp" alt="" srcset="">
                                <h5>钢铁意志</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                        <li><a href="#"><img src="img/movie8.webp" alt="" srcset="">
                                <h5>扫黑行动</h5>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>
                                <span>6.2</span><br>
                                <button>选座购票</button>
                            </a></li>
                    </ul>
                </div>
                <div class="right">
                    <h3>影片分类 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#">爱情</a></li>
                        <li><a href="#">喜剧</a></li>
                        <li><a href="#">剧情</a></li>
                        <li><a href="#">悬疑</a></li>
                        <li><a href="#">经典</a></li>
                        <li><a href="#">动画</a></li>
                        <li><a href="#">科幻</a></li>
                        <li><a href="#">犯罪</a></li>
                        <li><a href="#">动作</a></li>
                        <li><a href="#">青春</a></li>
                        <li><a href="#">搞笑</a></li>
                        <li><a href="#">文艺</a></li>
                        <li><a href="#">惊悚</a></li>
                        <li><a href="#">荔枝</a></li>
                        <li><a href="#">纪录片</a></li>
                        <li><a href="#">黑色幽默战争</a></li>
                        <li><a href="#">家庭</a></li>
                        <li><a href="#">美国</a></li>
                        <li><a href="#">日本</a></li>
                        <li><a href="#">香港</a></li>
                        <li><a href="#">中国大陆韩国</a></li>
                        <li><a href="#">中国</a></li>
                        <li><a href="#">英国</a></li>
                        <li><a href="#">法国</a></li>
                        <li><a href="#">台湾</a></li>
                        <li><a href="#">印度</a></li>
                    </ul>

                    <h3>近期热门 · · · · · · <a href="#">（更多）</a></h3>
                    <ol>
                        <li>1. <a href="#">子弹列车</a></li>
                        <li>2. <a href="#">珀尔</a></li>
                        <li>3. <a href="#">新·奥特曼</a></li>
                        <li>4. <a href="#">善恶魔法学院</a></li>
                        <li>5. <a href="#">狩猎</a></li>
                        <li>6. <a href="#">晒后假日</a></li>
                        <li>7. <a href="#">有史以来最棒的啤酒运送</a></li>
                        <li>8. <a href="#">一场很（没）有必要的春晚</a></li>
                        <li>9. <a href="#">特级英雄黄继光</a></li>
                        <li>10. <a href="#">哥们儿</a></li>
                    </ol>

                </div>
            </div>
        </div>

        <!--逗拌小组-->
        <div class="club">
            <a href="#" name="club"></a>
            <div class="club-content wrapper">
                <div class="left">
                    <h1>小组</h1>
                    <ul>
                        <li><a href="#">精选</a></li>
                        <li><a href="#">文化</a></li>
                        <li><a href="#">行摄</a></li>
                        <li><a href="#">娱乐</a></li>
                        <li><a href="#">时尚</a></li>
                        <li><a href="#">生活</a></li>
                        <li><a href="#">科技</a></li>
                    </ul>
                </div>
                <div class="mid">
                    <h3>热门小组 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/club1.webp" alt=""></a>
                            <div class="detail">
                                <a>记事本圆梦小组</a>
                                <p>117027 个成员</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <h3>小组分类 · · · · · · <a href="#">（更多）</a></h3>
                    <br>
                    <h5>兴趣»</h5>
                    <ul>
                        <li><a href="#">旅行</a></li>
                        <li><a href="#">摄影</a></li>
                        <li><a href="#">影视</a></li>
                        <li><a href="#">音乐</a></li>
                        <li><a href="#">文学</a></li>
                        <li><a href="#">游戏</a></li>
                        <li><a href="#">动漫</a></li>
                        <li><a href="#">运动</a></li>
                        <li><a href="#">戏曲</a></li>
                        <li><a href="#">桌游</a></li>
                        <li><a href="#">怪癖</a></li>
                    </ul>
                    <h5>生活»</h5>
                    <ul>
                        <li><a href="#">健康</a></li>
                        <li><a href="#">美食</a></li>
                        <li><a href="#">宠物</a></li>
                        <li><a href="#">美容</a></li>
                        <li><a href="#">化妆</a></li>
                        <li><a href="#">护肤</a></li>
                        <li><a href="#">服饰</a></li>
                        <li><a href="#">公益</a></li>
                        <li><a href="#">家庭</a></li>
                        <li><a href="#">育儿</a></li>
                        <li><a href="#">汽车</a></li>
                    </ul>
                    <h5>购物»</h5>
                    <ul>
                        <li><a href="#">淘宝</a></li>
                        <li><a href="#">二手</a></li>
                        <li><a href="#">团购</a></li>
                        <li><a href="#">数码</a></li>
                        <li><a href="#">品牌</a></li>
                        <li><a href="#">文具</a></li>
                    </ul>
                    <h5>社会»</h5>
                    <ul>
                        <li><a href="#">求职</a></li>
                        <li><a href="#">租房</a></li>
                        <li><a href="#">励志</a></li>
                        <li><a href="#">留学</a></li>
                        <li><a href="#">出国</a></li>
                        <li><a href="#">理财</a></li>
                        <li><a href="#">传媒</a></li>
                        <li><a href="#">创业</a></li>
                        <li><a href="#">考试</a></li>
                    </ul>
                    <h5>艺术»</h5>
                    <ul>
                        <li><a href="#">设计</a></li>
                        <li><a href="#">手工</a></li>
                        <li><a href="#">展览</a></li>
                        <li><a href="#">曲艺</a></li>
                        <li><a href="#">舞蹈</a></li>
                        <li><a href="#">雕塑</a></li>
                        <li><a href="#">纹身</a></li>
                    </ul>
                    <h5>学术»</h5>
                    <ul>
                        <li><a href="#">人文</a></li>
                        <li><a href="#">社科</a></li>
                        <li><a href="#">自然</a></li>
                        <li><a href="#">建筑</a></li>
                        <li><a href="#">国学</a></li>
                        <li><a href="#">语言</a></li>
                        <li><a href="#">宗教</a></li>
                        <li><a href="#">哲学</a></li>
                        <li><a href="#">软件</a></li>
                        <li><a href="#">硬件</a></li>
                        <li><a href="#">互联网</a></li>
                    </ul>
                    <h5>情感»</h5>
                    <ul>
                        <li><a href="#">恋爱</a></li>
                        <li><a href="#">心理</a></li>
                        <li><a href="#">心理学</a></li>
                        <li><a href="#">星座</a></li>
                        <li><a href="#">塔罗</a></li>
                    </ul>
                    <h5>闲聊»</h5>
                    <ul>
                        <li><a href="#">吐槽</a></li>
                        <li><a href="#">笑话</a></li>
                        <li><a href="#">直播</a></li>
                    </ul>


                </div>
            </div>
        </div>

        <!--逗拌读书-->
        <div class="read">
            <a href="#" name="read"></a>
            <div class="wrapper read-content">
                <div class="left">
                    <h1>读书</h1>
                    <ul>
                        <li><a href="#">分类浏览</a></li>
                        <li><a href="#">阅读</a></li>
                        <li><a href="#">作者</a></li>
                        <li><a href="#">书评</a></li>
                        <li><a href="#">购书单</a></li>
                    </ul>
                </div>
                <div class="mid">
                    <h3>新书速递 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                        <li><a href="#"><img src="img/read1.jpg" alt="" srcset="">
                                <span>世界上最丑的女...[波兰] 奥尔...</span><br>
                                <button>免费试读</button></a></li>
                    </ul>
                </div>
                <div class="right">
                    <h3>热门标签 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#">[文学]</a></li>
                        <li><a href="#">小说</a></li>
                        <li><a href="#">随笔</a></li>
                        <li><a href="#">日本文学</a></li>
                        <li><a href="#">散文</a></li>
                        <li><a href="#">诗歌</a></li>
                        <li><a href="#">童话</a></li>
                        <li><a href="#">名著</a></li>
                        <li><a href="#">港台</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">[流行]</a></li>
                        <li><a href="#">漫画</a></li>
                        <li><a href="#">推理</a></li>
                        <li><a href="#">绘本</a></li>
                        <li><a href="#">科幻</a></li>
                        <li><a href="#">青春</a></li>
                        <li><a href="#">言情</a></li>
                        <li><a href="#">奇幻</a></li>
                        <li><a href="#">武侠</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">[文化]</a></li>
                        <li><a href="#">历史</a></li>
                        <li><a href="#">哲学</a></li>
                        <li><a href="#">传记</a></li>
                        <li><a href="#">设计</a></li>
                        <li><a href="#">文具</a></li>
                        <li><a href="#">电影</a></li>
                        <li><a href="#">回忆录</a></li>
                        <li><a href="#">音乐</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">[生活]</a></li>
                        <li><a href="#">旅行</a></li>
                        <li><a href="#">励志</a></li>
                        <li><a href="#">教育</a></li>
                        <li><a href="#">职场</a></li>
                        <li><a href="#">美食</a></li>
                        <li><a href="#">健康</a></li>
                        <li><a href="#">家具</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">[经管]</a></li>
                        <li><a href="#">经济学</a></li>
                        <li><a href="#">管理</a></li>
                        <li><a href="#">商业</a></li>
                        <li><a href="#">金融</a></li>
                        <li><a href="#">营销</a></li>
                        <li><a href="#">理财</a></li>
                        <li><a href="#">股票</a></li>
                        <li><a href="#">企业史</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">[科技]</a></li>
                        <li><a href="#">科普</a></li>
                        <li><a href="#">互联网</a></li>
                        <li><a href="#">编程</a></li>
                        <li><a href="#">交互设计</a></li>
                        <li><a href="#">算法</a></li>
                        <li><a href="#">通信</a></li>
                        <li><a href="#">神经网络</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
        
                </div>
            </div>
        </div>

        <!--逗拌音乐-->
        <div class="music">
            <a href="#" name="music"></a>
            <div class="wrapper music-content">
                <div class="left">
                    <h1>音乐</h1>
                    <ul>
                        <li><a href="#">音乐人</a></li>
                        <li><a href="#">潮潮逗拌音乐周</a></li>
                        <li><a href="#">金羊毛计划</a></li>
                        <li><a href="#">专题</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">分类浏览</a></li>
                        <li><a href="#">乐评</a></li>
                        <li><a href="#">逗拌FM</a></li>
                        <li><a href="#">歌单</a></li>
                        <li><a href="#">阿比鹿音乐奖</a></li>
                    </ul>
                </div>
                <div class="mid">
                    <h3>逗拌新碟榜 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>1. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>2. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>3. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>4. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>5. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>6. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>7. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                        <li><a href="#"><img src="img/music1.jpg" alt="" srcset="">
                                <span>8. The Loneliest Time Carly Rae Jepsen</span><br>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star-empty"></span>7.5</a></li>
                    </ul>
                </div>
                <div class="right">
                    <h3>本周流行音乐人 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li><a href="#">1. Yamato Ryou流派: 电子 Electronica</a></li>
                        <li><a href="#">2. The NONAME流派: 摇滚 Rock</a></li>
                        <li><a href="#">3. LAVA|OX|SEA流派: 摇滚 Rock</a></li>
                        <li><a href="#">4. JESSE CHOW流派: 电子 Electronica</a></li>
                        <li><a href="#">5. Fading Horizon流派: 摇滚 Rock</a></li>
                    </ul>
        
                </div>
            </div>
        </div>

        <!--逗拌逗品-->
        <div class="pin">
            <div class="pin-content wrapper">

            </div>
        </div>

        <!--逗拌同城-->
        <div class="city">
            <a href="#" name="city"></a>
            <div class="city-content wrapper">
                <div class="left">
                    <h1>同城</h1>
                    <ul>
                        <li><a href="#">近期活动</a></li>
                        <li><a href="#">主办方</a></li>
                        <li><a href="#">舞台剧</a></li>
                    </ul>
                </div>
                <div class="mid">
                    <h3>热门活动 · · · · · · <a href="#">（更多）</a></h3>
                    <ul>
                        <li>
                            <a><img src="img/city1.jpg" alt=""></a>
                            <div class="detail">
                                <a>今日秋末「 我和你」云和冲突 灰寂</a>
                                <p>11月6日 周日 17:00 - 19:00乐空间 YUE SPACE 北新桥板</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/city1.jpg" alt=""></a>
                            <div class="detail">
                                <a>今日秋末「 我和你」云和冲突 灰寂</a>
                                <p>11月6日 周日 17:00 - 19:00乐空间 YUE SPACE 北新桥板</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/city1.jpg" alt=""></a>
                            <div class="detail">
                                <a>今日秋末「 我和你」云和冲突 灰寂</a>
                                <p>11月6日 周日 17:00 - 19:00乐空间 YUE SPACE 北新桥板</p>
                            </div>
                        </li>
                        <li>
                            <a><img src="img/city1.jpg" alt=""></a>
                            <div class="detail">
                                <a>今日秋末「 我和你」云和冲突 灰寂</a>
                                <p>11月6日 周日 17:00 - 19:00乐空间 YUE SPACE 北新桥板</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <h3>活动标签 · · · · · · <a href="#">（更多）</a></h3>
                    <br>
                    <h5>音乐»</h5>
                    <ul>
                        <li><a href="#">小型现场</a></li>
                        <li><a href="#">音乐会</a></li>
                        <li><a href="#">演唱会</a></li>
                        <li><a href="#">音乐节</a></li>
                    </ul>
                    <h5>戏剧»</h5>
                    <ul>
                        <li><a href="#">话剧</a></li>
                        <li><a href="#">音乐剧</a></li>
                        <li><a href="#">舞剧</a></li>
                        <li><a href="#">歌剧</a></li>
                        <li><a href="#">戏曲</a></li>
                        <li><a href="#">其他</a></li>
                    </ul>
                    <h5>聚会»</h5>
                    <ul>
                        <li><a href="#">生活</a></li>
                        <li><a href="#">集市</a></li>
                        <li><a href="#">摄影</a></li>
                        <li><a href="#">外语</a></li>
                        <li><a href="#">桌游</a></li>
                        <li><a href="#">夜店</a></li>
                        <li><a href="#">交友</a></li>
                        <li><a href="#">美食</a></li>
                        <li><a href="#">派对</a></li>
                    </ul>
                    <h5>电影»</h5>
                    <ul>
                        <li><a href="#">主题放映</a></li>
                        <li><a href="#">影展</a></li>
                        <li><a href="#">影院活动</a></li>
                    </ul>
                    <h5>其它»</h5>
                    <ul>
                        <li><a href="#">讲座</a></li>
                        <li><a href="#">展览</a></li>
                        <li><a href="#">运动</a></li>
                        <li><a href="#">旅行</a></li>
                        <li><a href="#">公益</a></li>
                    </ul>

                </div>
            </div>
        </div>

    </div>


    <!-- foot -->
    <div class="foot wrapper">
        <div class="left">
            <ul>
                <li>© 2005－2022 harry.com, all rights reserved 北京逗网科技有限公司</li>
                <li><a href="">营业执照 京ICP证090015号 京ICP备11027288号 网络视听许可证0110000号</a></li>
                <li>京网文[2021]2980-826号 新出发京批字第直160029号 （署）网出证（京）字第020号</li>
                <li>违法和不良信息/涉未成年人有害信息投诉：<a href="">tousu@harry.com</a></li>
                <li>违法和不良信息投诉电话：4008353331-9 </li>
                <li>网络从业者不良行为举报：<a href="">jubao@harry.com</a></li>
                <li>中国互联网举报中心 电话：12345 京公网安备11000000000000</li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="">关于逗拌</a></li>
                <li><a href="">在逗拌工作</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">法律声明</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">移动逗拌</a></li>
                <li><a href="">逗拌广告</a></li>
            </ul>
        </div>
    </div>

    <div class="return-top">
        <a href="#">
            <span class="glyphicon glyphicon-arrow-up"></span><br>
            top
        </a>
    </div>


</body>

</html>